<template>
  <div class="topList">
    <music-list :title="title" :bgImg="bgImg" :songs="songlist" :rank="rank"></music-list>
  </div>
</template>
<script>
import MusicList from 'components/music-list/music-list'
import {getRankList} from 'api/rank'
import {ERR_OK} from 'api/config'
import {createSong} from 'common/js/songs'
import {mapGetters} from 'vuex'
export default {
  name: 'TopList',
  data () {
    return {
      songlist: [],
      rank: true
    }
  },
  computed: {
    title () {
      return this.getTopList().topTitle
    },
    bgImg () {
      return this.getTopList().picUrl
    }
  },
  mounted () {
    this._getRankList()
  },
  methods: {
    _getRankList () {
      if (!this.getTopList().id) {
        this.$router.push('/rank')
      }
      getRankList(this.getTopList().id)
        .then((res) => {
          if (res.code === ERR_OK) {
            this.songlist = this._normalizeSongs(res.songlist)
            // console.log(this.songlist)
          }
        })
    },
    _normalizeSongs (songlist) {
      let ret = []
      songlist.forEach((item) => {
        let song = createSong(item.data)
        ret.push(song)
      })
      return ret
    },
    ...mapGetters({getTopList: 'toplist'})
  },
  components: {
    MusicList
  }
}
</script>
<style lang="scss" scoped>
.topList{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
</style>
